<template>
  <div class="edit">
    <img class="title" :src="require('../assets/images/edit-title.png')" alt="">
    <div class="bottom">
      <div class="trapezoid1"></div>
      <div class="trapezoid2"></div>
      <div @click="selectPhoto()" class="button button1">重选</div>
      <div @click="next()" class="button button2">下一步</div>
    </div>
  </div>
</template>

<script>
import imageCropper from '@/components/imageCropper'
import { mapState } from 'vuex'
export default {
  name: 'edit',
  components: {
    imageCropper
  },
  computed: {
    ...mapState(['base64'])
  },
  data () {
    return {
      cropperConfig: {
        width: 480,
        height: 997,
        quality: 0.8,
        maxWidth: 624
      }
    }
  },
  methods: {
    selectPhoto () {
      this.$refs.imageCropper.checkPhoto()
    },
    next () {
      this.$refs.imageCropper.confirm()
    },
    loadImage (data) {
      console.log(data)
    }
  }
}
</script>

<style lang="scss" scoped>
.edit{
  position: absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
}
.title{
  margin:.8rem auto;
  margin-bottom:0;
  display:block;
  width:3.68rem;
  z-index:10;
}
.bottom{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:2.2rem;
  background-color:#56d1c8;
  // overflow-x:hidden;
}
.trapezoid1{
  position:absolute;
  top:0;
  left:50%;
  transform: translateX(-50%);
  width:4.8rem;
  height:0;
  border-width:0 2.4rem 2.4rem 2.4rem;
  border-style:none solid solid;
  border-color:transparent transparent #ffe869;
}
.trapezoid2{
  position:absolute;
  top:0;
  left:50%;
  transform: translateX(-50%);
  height:0;
  width:4.2rem;
  border-width:0 1.8rem 1.8rem 1.8rem;
  // border-width:0 1rem 1.8rem 1rem;
  border-style:none solid solid;
  border-color:transparent transparent #ffab6c;
}
.screen{
  position:absolute;
  bottom:1.5rem;
  left:50%;
  transform: translateX(-50%);
  width:4.8rem;
  height:9.97rem;
  border:.1rem solid #FFF;
}
.button{
  position:absolute;
  bottom:.5rem;
  width:2rem;
  height:.6rem;
  color:#FFF;
  border:1px solid #FFF;
  font-size:.32rem;
  text-align: center;
  line-height:.6rem;
}
.button1{
  left:1rem
}
.button2{
  right:1rem;
}
</style>
